<template>
  <div ref="web">

  </div>
</template>
<script>
export default {
  name: 'WebChange',
  props: {
    value: Number
  },

  data() {
    return {
      _leaveTime: 0,
      times: 0,
      _backTime: 0
    }
  },

  created() {
    if (this.value != 0) {
      this.times = this.value;
      document.addEventListener('visibilitychange', e => this.handleChange(e));
    }

  },
  destroyed() {
    if (this.value != 0) {
      document.removeEventListener('visibilitychange', e => this.handleChange(e));
    }
    
  },
  methods: {
    handleChange(e) {
      if (document.visibilityState === 'hidden') {

        this._leaveTime = new Date().getTime();
      } else if (document.visibilityState === 'visible') {
        this._backTime = new Date().getTime();
      }
      if (this._backTime - this._leaveTime > 7000) {
        this.times = this.times - 1;
        this.$emit('timeout', this.times)
      }

    }
  }


}
</script>
<style scoped></style>